<template>
  <el-card shadow="never" style="margin: 24px">
    <k-toolbar>
      <el-button @click="onCreate" type="primary">新建栏目</el-button>
      <el-button @click="onRefresh">刷新</el-button>
    </k-toolbar>

    <el-table :data="showList" v-loading="loading">
      <el-table-column label="栏目名" prop="name" />
      <el-table-column label="类型" prop="type" />
      <el-table-column label="顺序" prop="sort" />

      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button type="text" @click="onEdit(scope)">编辑</el-button>
          <el-button type="text" @click="onDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <board-form />
  </el-card>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from 'vue'
import { deleteBoard, getBoardList } from '@/services/board.service'
import KToolbar from '@/components/toolbar.vue'
import BoardForm from '@/views/board/components/form.vue'
import { createStateKey, provideDialogState } from '@/plugins/element'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCommonState } from '@/store/common'

// 创建窗口状态key
export const dialogKey = createStateKey<Board>()

export const defaultValues = {
  name: '',
  type: 'article',
  template_index: 'article/index',
  template_list: 'article/list',
  template_detail: 'article/detail'
}

// 格式化栏目数据
export const formatBoardRow = (data: Board): Board => {
  const common = useCommonState()
  const typ = common.types.find(item => item.name === data.type)
  if (typ !== undefined) {
    data.type = typ.text
  }
  return data
}

export default defineComponent({
  name: 'Board',
  components: { BoardForm, KToolbar },
  setup () {
    const loading = ref(true)
    const list = ref<Board[]>([])

    const dialog = provideDialogState<Board>(dialogKey, defaultValues, (event, data) => {
      if (event === 'create') {
        list.value.unshift(data)
      } else {
        const idx = list.value.findIndex(item => item.id === data.id)
        if (idx > -1) {
          list.value.splice(idx, 1, data)
        }
      }
    })

    // 新建栏目
    const onCreate = () => {
      dialog.show('新建栏目', defaultValues)
    }

    // 修改栏目信息
    const onEdit = (scope: TableColumnEvent<Board>) => {
      dialog.show('修改栏目信息', scope.row)
    }

    // 删除栏目
    const onDelete = async (scope: TableColumnEvent<Board>) => {
      await ElMessageBox.confirm('确定要删除此栏目?')
      try {
        const id = scope.row.id
        if (id === undefined) {
          return
        }
        await deleteBoard(id)
        const idx = list.value.findIndex(item => item.id === id)
        if (idx > -1) {
          list.value.splice(idx, 1)
        }
        ElMessage.success('栏目已删除')
      } catch (e) {
        ElMessage.error(e.message)
      }
    }

    // 获取栏目列表
    const getListData = async () => {
      loading.value = true
      try {
        const board = await getBoardList()
        list.value = board.list
      } finally {
        loading.value = false
      }
    }

    // 刷新
    const onRefresh = async () => {
      await getListData()
    }

    onMounted(getListData)

    return {
      loading,
      list,
      showList: computed(() => list.value.map(formatBoardRow)),
      onCreate,
      onEdit,
      onRefresh,
      onDelete
    }
  }
})
</script>

<style scoped lang="scss">

</style>
